<template>
	<view>
		<camera device-position="front" flash="off" class="camera" @error="error" v-if="showCamera"></camera>
		<image mode="widthFix" class="image" :src="photoPath" v-if="showImage"></image>
		<view class="operate-container">
			<button type="primary" class="btn" @tap="clickBtn" :disabled="!canCheckin">{{ btnText }}</button>
			<button type="warn" class="btn" @tap="afresh" :disabled="!canCheckin">重拍</button>
		</view>
		<view class="notice-container">
			<text class="notice">注意事项</text>
			<text class="desc">拍照签到的时候，必须要拍摄自己的正面照片，侧面照片会导致无法识别。另外，拍照的时候不要戴墨镜或者帽子，避免影响拍照签到的准确度。</text>
		</view>
	</view>
</template>

<script>
// 引入腾讯定位的SDK
var QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');
var qqmapsdk;
export default {
	data() {
		return {
			btnText: '拍摄',
			canCheckin: true,
			photoPath: '',
			showCamera: true,
			showImage: false
		};
	},
	onLoad: function() {
		this.ajax(this.url.isTodayCheckin,'GET',null,resp => {
			let result = resp.data;
			if(!result.result){
				uni.showToast({
					title: '今日已签到',
					complete: function() {
						uni.redirectTo({
							url: '../checkin_result/checkin_result'
						});
					}
				});
			}
		})
		qqmapsdk = new QQMapWX({
			key: 'D36BZ-****-****-JI6Y4-TA4Y3-U2FTO'
		});
	},
	methods: {
		clickBtn() {
			console.log('进行拍照');
			let that = this;
			if (that.btnText == '拍摄') {
				let ctx = wx.createCameraContext();
				ctx.takePhoto({
					quality: 'high',
					success: resp => {
						that.photoPath = resp.tempImagePath;
						that.showCamera = false;
						that.showImage = true;
						that.btnText = '签到';
					}
				});
			} else {
				// @TODO 签到功能
				uni.showLoading({
					title: '签到中，请稍后'
				});

				setTimeout(function() {
					uni.hideLoading();
				}, 3000);

				//获取地理定位
				uni.getLocation({
					type: 'wgs84',
					success: function(resp) {
						let latitude = resp.latitude;
						let longitude = resp.longitude;
						console.log(latitude);
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: latitude,
								longitude: longitude
							},
							success: function(resp) {
								console.log(resp.result);
								let address = resp.result.address;
								let addressComponent = resp.result.address_component;
								let nation = addressComponent.nation;
								let province = addressComponent.province;
								let city = addressComponent.city;
								let district = addressComponent.district;
								uni.uploadFile({
									url: that.url.checkin,
									filePath: that.photoPath,
									name: 'photo',
									header: {
										token: uni.getStorageSync('token')
									},
									formData: {
										address: address,
										country: nation,
										province: province,
										city: city,
										district: district
									},
									success: resp => {
										// console.log(resp);
										if (resp.statusCode == 500 && resp.data == '不存在人脸模型') {
											uni.hideLoading();
											uni.showModal({
												title: '提示信息',
												content: 'Line-Work系统中不存在你的人脸识别模型，是否用当前这张照片作为人脸识别模型？',
												success: function(res) {
													if (res.confirm) {
														//上传头像图片
														uni.uploadFile({
															url: that.url.createFaceModel,
															filePath: that.photoPath,
															name: 'photo',
															header: {
																token: uni.getStorageSync('token')
															},
															success: function(resp) {
																if (resp.statusCode == 500) {
																	uni.showToast({
																		title: resp.data,
																		icon: 'none'
																	});
																} else if (resp.statusCode == 200) {
																	uni.showToast({
																		title: '人脸建模成功',
																		icon: 'none'
																	});
																}
															}
														});
													}
												}
											});
										} else if (resp.statusCode == 200) {
											let data = JSON.parse(resp.data);
											let code = data.code;
											let msg = data.msg;
											if (code == 200) {
												uni.hideLoading();
												//签到成功
												uni.showToast({
													title: '签到成功',
													complete: function() {
														//TODO 跳转到签到结果统计页面
														uni.navigateTo({
															url: '../checkin_result/checkin_result'
														});
													}
												});
											}
										} else if (resp.statusCode == 500) {
											uni.showToast({
												title: resp.data,
												icon: 'none'
											});
										}
									}
								});
							},
							fail: function(resp) {
								console.log(resp);
							}
						});
					}
				});
			}
		},
		afresh() {
			this.showCamera = true;
			this.showImage = false;
			this.btnText = '拍摄';
		}
	}
};
</script>

<style lang="less">
@import url('../../style.less');

.camera,
.image {
	width: 100%;
	height: 800rpx;
}

.operate-container {
	margin-top: 10px;
}

.operate-container {
	display: flex;
	justify-content: center;
	margin-top: 50rpx;

	.btn {
		width: 40%;
		margin: 0;

		&:first-child {
			margin-right: 30rpx;
		}
	}
}

.notice-container {
	padding: 40rpx 60rpx;

	.notice {
		font-size: 40rpx;
		color: @font-color;
		font-weight: bold;
		display: block;
		margin-bottom: 15rpx;
	}

	.desc {
		display: block;
		font-size: 32rpx;
		color: @desc-color;
		line-height: 1.6;
	}
}
</style>
